import React from 'react'
import {NANO_GAMES_TECH_CODE} from "../../../../../../redux/game";

const StatCard = props => {

    const {
        stat,
    } = props

    const {
        type,
        home,
        away,
    } = stat

    const pStyle = {
        lineHeight: '24px',
        color: '#fff',
    }

    const statName = NANO_GAMES_TECH_CODE[type]

    const template = (
        <div
            style={{
                width: '33%',
                textAlign: 'center',
                padding: '12px',
            }}
            className='flex-center-align-center flex-column'
        >
            <p
                style={{
                    opacity: '0.6',
                    color: '#333',
                    marginBottom: '8px',
                }}
            >{statName}</p>
            <div className='flex-center-align-center'>
                <div
                    style={{
                        height: '24px',
                        width: '28px',
                        backgroundColor: '#213A4B',
                        marginRight: '1px',
                    }}
                    className='flex-center-align-center'
                >
                    <p style={pStyle}>
                        {home}
                    </p>
                </div>
                <div style={{
                    height: '24px',
                    width: '28px',
                    backgroundColor: '#FFA500',
                }}
                >
                    <p style={pStyle}>
                        {away}
                    </p>
                </div>
            </div>
        </div>
    )

    if (type === 2 || type === 3 || type === 4) return null

    return template

}

export default StatCard
